<!DOCTYPE html>
<!--[if lt IE 7]>  <html class="ie ie6 lte9 lte8 lte7 no-js"> <![endif]-->
<!--[if IE 7]>     <html class="ie ie7 lte9 lte8 lte7 no-js"> <![endif]-->
<!--[if IE 8]>     <html class="ie ie8 lte9 lte8 no-js">      <![endif]-->
<!--[if IE 9]>     <html class="ie ie9 lte9 no-js">           <![endif]-->
<!--[if gt IE 9]>  <html class="no-js">                       <![endif]-->
<!--[if !IE]><!--> <html class="no-js">                       <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>ELITE - A Powerfull Responsive Admin Theme</title>
    
	<!-- 
    ***************************************
    DEMO - DEMO - DEMO - DEMO - DEMO - DEMO
    
    This demo is modifyed to perfom 
    better(as our servers anr't that fast)
    Most cusom files are compressed and 
    are not readable.
    ***************************************
    -->
    
	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.html">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/mobile/apple-touch-icon-114x114.png" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/mobile/apple-touch-icon-72x72.png" />
    <link rel="apple-touch-icon-precomposed" href="images/mobile/apple-touch-icon.png" />
    <link rel="shortcut icon" href="images/apple-touch-icon.html" />
    <link rel="apple-touch-startup-image" media="(max-device-width: 480px) and not (-webkit-min-device-pixel-ratio: 2)" href="images/mobile/splash-320x460.png" />
    <link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="images/mobile/splash-640x920-retina.png" />
    <link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: portrait)" href="images/mobile/splash-768x1004.png" />
    <link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: landscape)" href="images/mobile/splash-1024x748.png" />
    <link rel="apple-touch-startup-image" media="(min-device-width: 1536px) and (orientation: portrait)" href="images/mobile/splash-1536x2008-retina.png" />
    <link rel="apple-touch-startup-image" media="(min-device-width: 2048px) and (orientation: landscape)" href="images/mobile/splash-2048x1496-retina.png" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="HandheldFriendly" content="true"/>   
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
    <script src="js/mobiledevices.js"></script>

    <meta name="application-name" content="Elite Admin Skin">
    <meta name="msapplication-tooltip" content="Cross-platform admin skin.">
    <meta name="msapplication-starturl" content="http://themes.creativemilk.net/elite/html/index.html">
    <meta name="msapplication-task" content="name=Home;action-uri=http://themes.creativemilk.net/elite/html/index.html;icon-uri=http://themes.creativemilk.net/elite/html/images/favicons/favicon.ico">
    <meta http-equiv="cleartype" content="on" /> 
    
    <!--[if lt IE 8]>
	<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="css/framework.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/ui/jquery.ui.base.css"/>
    <link rel="stylesheet" href="css/theme/darkblue.css" id="themesheet"/>
	<!--[if IE 7]>
	<link rel="stylesheet" href="css/destroy-ie6-ie7.css"/>
    <![endif]-->
    
    <link rel="shortcut icon" href="images/favicons/favicon.ico" />

    <script src="../../ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>!window.jQuery && document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
    <script src="../../code.jquery.com/ui/1.8.22/jquery-ui.min.js"></script>
    <script>!window.jQueryUI && document.write('<script src="js/jquery-ui-1.8.22.min.js"><\/script>')</script>
    <script src="js/jquery.ui.touch-punch.min.js"></script>
    <script src="js/jquery.mousewheel.min.js"></script>
	<script src="js/jquery.ui.spinner.js"></script>            
    <script src="js/tipsy.js"></script>                       
    <script src="js/treeview.js"></script>                      
    <script src="js/fullcalendar.min.js"></script>               
    <script src="js/selectToUISlider.jQuery.js"></script>       
    <script src="js/jquery.contextMenu.js"></script>            
    <script src="js/elfinder.min.js"></script>                  
    <script src="js/autogrow-textarea.js"></script>              
    <script src="js/textarearesizer.min.js"></script>
    <script src="wysiwyghtml5/parser_rules/advanced.js"></script>
	<script src="wysiwyghtml5/dist/wysihtml5-0.3.0.js"></script>                    
    <script src="js/jquery.colorbox-min.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src="js/jquery.maskedinput-1.3.min.js"></script> 
    <script src="js/json2.js"></script>
    <script src="audiojs/audiojs/audio.min.js"></script> 
    <script src="js/e_styleswitcher.1.0.min.js"></script>                 
    <script src="js/main.js"></script>
    
    <!-- // HTML5/CSS3 support // -->

    <script src="js/modernizr.min.js"></script>
                
</head>
<body class="layout_fluid layout_responsive"> 

    <!-- this part can be removed, its just here 
         to let you switch between styles and layout sizes -->
    <div id="e-styleswitcher">
        <div class="e-styleswitcher-inner">
            <div class="e-styleswitcher-arrow"><img src="images/icons/plix-16/white/arrow-right-16.png" alt="" /></div>
            <div class="box">
            	<h4>Styles</h4>
                <select id="choose-styling">
                	<option value="strangeblue">Strange blue</option>
                    <option value="black">Black</option>
                    <option value="darkblue">Dark blue</option>
                    <option value="lightgrey">Light grey</option>
                </select>
            </div>    
            <div class="box">
            	<h4>Layout sizes</h4>                
                <select id="set-layout-size">
                	<option value="layout_fluid">fluid</option>
                    <option value="layout_768">768</option>
                    <option value="layout_960">960</option>
                    <option value="layout_1024">1024</option>
                    <option value="layout_1200">1200</option>
                    <option value="layout_1600">1600</option>
                </select>
            </div> 
            <div class="box">
            	<h4>Responsive</h4>                
                <select id="set-layout-responsive">
                	<option value="layout_responsive">yes</option>
                    <option value="">no</option>
                </select>
            </div>
            <div class="box">
            	<h4>Get theme</h4>                
                <select id="get-theme">
                	<option value="">no</option>
                    <option value="yes">yes</option>
                </select>
            </div>                         
        </div>
    </div>
  
	<div id="container">
    
        <!-- MAIN HEADER -->
                
        <header id="header">
        	<div id="header-border">
                <div id="header-inner">
                
                    <div class="left">
                        <a href="index.html" id="logo">ELITE</a>
                    </div><!-- End .left -->
                    
                    <div class="right">
                        <!-- eMenu -->
                        <nav>
                            <ul class="e-splitmenu" id="header-menu">
                                <li><span>Menu</span><a href="javascript:void(0);"><span class="arrow-down-10 plix-10"></span></a>
                                
                                     <div>
                                        <ul>
                                            <li><a href="index.html"><span class="stats2-10 plix-10"></span> Stats</a></li>
                                            <li><a href="index.html"><span class="lock-10 plix-10"></span> Security</a></li>
                                            <li><a href="index.html"><span class="download-10 plix-10"></span> Downloads</a></li>
                                        </ul>                                      
                                    </div>                               

                                </li>
                                <li><span>Settings</span><a href="javascript:void(0);"><span class="arrow-down-10 plix-10"></span></a>
                                
                                     <div>
                                        <ul>
                                            <li><a href="index.html"><span class="home-10 plix-10"></span> Basic Settings</a></li>
                                            <li><a href="index.html"><span class="settings-10 plix-10"></span> Site Settings</a></li>
                                            <li><a href="index.html"><span class="comment-10 plix-10"></span> User Settings</a></li>
                                            <li><a href="index.html"><span class="bookmark-10 plix-10"></span> Server Settings</a></li>
                                        </ul>                                      
                                    </div>
                                    
                                </li>
                        		<li class="e-menu-profile">
                                    <a href="javascript:void(0);"><span class="arrow-down-10 plix-10"></span></a> 
                                    <img src="images/avatar.jpg" alt=""/>
                                    
                                    <div>
                                        <ul>
                                            <li><a href="index.html"><span class="mail-10 plix-10"></span> Inbox</a></li>
                                            <li><a href="index.html"><span class="upload-10 plix-10"></span> Settings</a></li>
                                            <li><a href="index.html"><span class="info-10 plix-10"></span> Logout</a></li>
                                        </ul>                                      
                                    </div> 
                                            
                                </li>
                            </ul>
                        </nav>
                    </div><!-- End .right --> 
                    
                </div><!-- End #header-border --> 
            </div><!-- End #header-inner -->  
                
		</header><!-- End #header -->
        
        <!-- CONTENT -->
                 
        <div id="content">
            <div id="content-border">
            
                <!-- CONTENT HEADER -->
                
                <header id="content-header">
                    <div class="left">
                    	<a href="javascript:void(0);" id="toggle-mainmenu" class="button-icon tip-s" title="Toggle Main Menu"><span class="arrow-up-10 plix-10"></span></a>
                        
                        <!-- main search form -->
                        <form method="post" id="mainsearch">
                            <input type="text" placeholder="Live search..." name="" autocomplete="off"/>
                            <input type="submit" value="" />
                        </form>
                    </div><!-- End .left --> 
                    <div class="right">
                    	<!-- sidebar switch -->
                    	<a href="javascript:void(0);" id="toggle-sidebar" class="button-icon tip-s" title="Switch Main Menu"><span class="arrow-left-10 plix-10"></span></a>
                        
                        <!-- breadcrumbs -->
                        <nav id="main-breadcrumbs">
                            <ul>
                                <li class="bc-tab-first">
                                    <a href="index.html">Home</a>
                                </li>
                                <li>
                                    <a href="documentation.html">Documentation</a>
                                </li>
                                <li class="bc-tab-last">Dialogs</li>
                            </ul>          
                        </nav>
                        
                        <!-- demo dialog button -->
                        <a href="javascript:void(0);" id="open-main-dialog" class="button-text-icon tip-w" title="Some tooltip pointing right"><span class="fullscreen-10 plix-10"></span> Dialog</a>
                        
                        <!-- the main page dialog -->
                        <div id="main-page-dialog" title="Welcome to Elite" style="display:none">
                        <img src="images/jquery-ui-logo.png" alt="" class="dummy-img-dialog"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet est et mauris ornare lobortis dignissim quis massa. Donec ullamcorper turpis ac lectus semper commodo. Mauris tincidunt, erat et tempor interdum, dolor metus consectetur dui, eu accumsan augue augue a erat. Fusce justo nibh, tristique vitae pretium ut, venenatis nec felis. Curabitur congue tempor ultricies. Proin quis libero dignissim neque posuere pharetra vel adipiscing massa. Sed sit amet erat ac arcu sodales aliquam. Nam tellus sapien, ornare in tincidunt vel, ultricies id quam.
						</div>
                        
                        <!-- widgets controls -->
                        <div id="widgets-controls">
							<ul class="e-splitmenu" id="page-actions">
                                <li><span>Actions</span><a href="javascript:void(0);"><span class="settings-10 plix-10"></span></a>
                                
                                     <div>
                                        <ul>
                                            <li><a href="index.html"><span class="pencil-10 plix-10"></span>Edit</a></li>
                                            <li><a href="index.html"><span class="document-10 plix-10"></span>View</a></li>
                                            <li><a href="index.html"><span class="trashcan-10 plix-10"></span> Delete</a></li>
                                        </ul>                                      
                                    </div>                               

                                </li>
                        	</ul>                        
                        </div>                    
                    </div><!-- End .right -->                
                
				</header><!-- End #content-header --> 
                                
                <div id="content-inner">
                    
                    <!-- SIDEBAR -->
                    
                    <aside>
                    
                    	<!-- SIDEBAR PROFILE -->
                        
                    	<div id="sidebar-profile">
                            <div id="main-avatar">
                            	<span class="indicator">38</span>
                                <img src="images/avatar.jpg" alt=""/>
                            </div>
                            <div id="profile-info">
                                <div>
                                    <a href="javascript:void(0);"><b>Administrator</b></a>
                                    <a href="javascript:void(0);">Profile settings</a>
                                    <a href="javascript:void(0);">Server settings</a>
                                    <a href="javascript:void(0);">Logout</a>
                                </div>
                            </div>
                        </div>
                        
                        <!-- MAIN MENU -->
                        
                        <nav id="main-menu">
                            <ul>
                                <li><a href="index.html"><span class="home-16 plix-16"></span> Dashboard</a></li>
                                <li class="page-active menu-open no-mobile"><a href="documentation.html"><span class="note-16 plix-16"></span> Documentation</a>
                                
                                    <ul>
                                    	<li><a href="doc-accordion.html">Accordion</a></li> 
                                    	<li><a href="doc-breadcrumbs.html">Breadcrumbs</a></li>
                                        <li><a href="doc-buttons.html">Buttons</a></li>
                                        <li><a href="doc-calendar.html">Calendar</a></li>
                                        <li><a href="doc-charts.html">Charts</a></li>
                                        <li class="page-active"><a href="doc-dialogs.html">Dialogs</a></li>
                                        <li><a href="doc-editors.html">Editors</a></li>
                                        <li><a href="doc-extra.html">Extra</a></li>
                                        <li><a href="doc-fileexplore.html">File Explore</a></li>
                                        <li><a href="doc-forms.html">Forms</a></li>
                                        <li><a href="doc-grid.html">Grid</a></li>
                                        <li><a href="doc-icons.html">Icons</a></li>
                                        <li><a href="doc-listsblocks.html">Lists &amp; Blocks</a></li>
                                        <li><a href="doc-media.html">Media</a></li>
                                        <li><a href="doc-menus.html">Menus</a></li>
                                        <li><a href="doc-misc.html">Misc</a></li>
                                        <li><a href="doc-search.html">Search</a></li>
                                        <li><a href="doc-tables.html">Tables</a></li>
                                        <li><a href="doc-tabs.html">Tabs</a></li>
                                        <li><a href="doc-toolbars.html">Toolbars</a></li> 
                                        <li><a href="doc-widgets.html">Widgets</a></li>                                         
                                    </ul 
                                                                   
                                ></li>
                                <li><a href="calendar.html"><span class="calendar-16 plix-16"></span>Calendar<span class="color-indicator">28</span></a></li>
                                <li><a href="javascript:void(0);"><span class="postcard-16 plix-16"></span> Form Elements <span class="button-icon"><span class="plus-10 plix-10"></span></span></a>

                                    <ul>
                                    	<li><a href="editors.html">Editors</a></li>
                                    	<li><a href="forms.html">Forms</a></li>
                                        <li><a href="login.html">Login form 1</a></li>
                                        <li><a href="login-2.html">Login form 2</a></li>
                                        <li><a href="login-3.html">Login form 3</a></li>
                                        <li><a href="login-4.html">Login form 4</a></li>
                                        <li><a href="search.html">Search</a></li>
                                        <li><a href="wizard.html">Wizard</a></li>                                         
                                    </ul>
                                
                                </li>
                                <li><a href="media.html"><span class="image-16 plix-16"></span> Media</a></li>
                                <li><a href="planning.html"><span class="pencil-16 plix-16"></span> Planning</a></li>
                                <li><a href="maps.html"><span class="map-16 plix-16"></span> Google Maps <span class="indicator tip-w" title="Some tip goes here">tooltip</span></a></li>
                                <li><a href="fileexplore.html"><span class="folder-16 plix-16"></span> File Explore</a></li> 
                                <li><a href="javascript:void(0);"><span class="warning-16 plix-16"></span> Error pages<span class="button-icon"><span class="plus-10 plix-10"></span></span></a>

                                    <ul>
                                    	<li><a href="400.html">400</a></li>
                                    	<li><a href="401.html">401</a></li>
                                        <li><a href="403.html">403</a></li>
                                        <li><a href="404.html">404</a></li>
                                        <li><a href="500.html">500</a></li>
                                        <li><a href="503.html">503</a></li>                                         
                                    </ul>
                                
                                </li>                                                               
                                <li><a href="widgets.html"><span class="rows4-16 plix-16"></span> Widgets</a></li>
                                <li><a href="tables.html"><span class="cells-16 plix-16"></span> Tables</a></li>
                                <li><a href="charts.html"><span class="stats2-16 plix-16"></span> Charts </a></li>
                                <li><a href="javascript:void(0);"><span class="controls-16 plix-16"></span> Interface Elements <span class="button-icon"><span class="plus-10 plix-10"></span></span></a>
                                
                                    <ul>
                                      	<li><a href="accordion.html">Accordion</a></li>                                        
                                        <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
                                        <li><a href="buttons.html">Buttons</a></li>
                                        <li><a href="dialogs.html">Dialogs</a></li>
                                        <li><a href="icons.html">Icons</a></li>
                                        <li><a href="listsblocks.html">Lists &amp; Blocks</a></li>
                                        <li><a href="menus.html">Menus</a></li>
                                        <li><a href="misc.html">Misc</a></li>
                                        <li><a href="tabs.html">Tabs</a></li>
                                        <li><a href="toolbars.html">Toolbars</a></li>
                                    </ul>           
                                                           
                                </li>
                                <li><a href="grid.html"><span class="layout3-16 plix-16"></span> Grid <span class="indicator">960</span></a></li>
                            </ul>
                        </nav>                      
                    </aside>
                    
                    <!-- sidebar meta stats -->
                    <div id="sidebar-meta">
                    	<div id="sidebar-meta-inner">
                        	<div>
                                <p class="left">Space</p> 
                                <p class="right">4,551 MB / 10 GB</p>
                            </div>
                            <div class="pbar">
                               <span style="width:50%"></span>                            
                            </div>
                        	<div>
                                <p class="left">Traffic</p> 
                                <p class="right">8,001 MB / 10 GB</p>
                            </div>
                            <div class="pbar">
                               <span style="width:81%"></span>                            
                            </div>
                        </div>  
                    </div> 
                     
                    <!-- CONTENT -->
                    
					<div id="content-main">
                        <div id="content-main-inner">

                            <div class="page-header">
                                <h2>Dialogs</h2>
                                <span class="page-helper">1.0</span>
                                <a href="dialogs.html" class="page-helper">Examples</a>
                                <p>Documentation about the dialogs.</p>
                            </div>
                                                     
                            <!-- Start grid -->
                                 
                            <section class="g_1">
                                <div class="doc-wrap" id="doc-tabs">

                                    <ul class="etabs">
                                        <li class="etabs-active"><a href="#etab1">eNotify</a></li>
                                        <li><a href="#etab2">Dialogs</a></li>
                                        <li><a href="#etab3">Third-party</a></li>
                                    </ul>  
                                    
                                    <div id="etab1" class="etabs-content"> 
                                    
                                        <div class="dialog-big warning">
                                            <h3>Plugin update</h3>
                                            <span>x</span>
                                            <div>
This plugin will be updated, we are going to add more features and option to it. Dont worry all our updates are <b>free and stay free</b>. All of the updates/changes are logged so that you know what to update and what not. 
                                            </div>                                                
                                        </div>
                                        
                                        <div class="spacer-15"><!-- spacer 15px --></div>  
                                        
                                        <div class="doc-intro">
                                            <h3>eNotify</h3>
                                            <p>eNotify is a powerfull notification plugin that allows you to show growls, notification and pre-loaders.</p>
                                        </div> 

                                        <div class="section-header">
                                            <h3>eGrowl</h3>
                                            <p>Powerfull growl notifications.</p>
                                        </div>
    
                                        <div class="spacer-15"><!-- spacer 15px --></div>  
                                                                                                                  
                                        <div class="section-header">
                                            <h3>Usage plugin</h3>
                                            <p>How to use our custom made jQuery plugins.</p>
                                        </div>
                                                                                                              
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="jsCode">$.e_notify.growl({
     title: 'Sticky growl',
     text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel arcu est. Suspendisse laoreet nisl nec magna feugiat.',
     image: 'images/growl-1.jpg',
     position: 'right-top',
     delay: 0,
     time: 2500,
     speed: 400,
     effect: 'fade',
     sticky: true,
     closable: true,
     maxOpen:3,
     className:'',
     onShow: function(){},
     onHide: function(){}
});</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Plugin options</h3>
                                            <p>Most of our custom made jQuery plugins have options/settings.</p>
                                        </div>  
                                                                                               
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Plugin options</th>
                                                    <th scope="col">Type</th>
                                                    <th scope="col">Required</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>title</td>
                                                    <td>string</td>
                                                    <td>yes*</td>
                                                    <td>This is the title of the growl.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>text</td>
                                                    <td>string</td>
                                                    <td>yes*</td>
                                                    <td>This is the text of the growl.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>image</td>
                                                    <td>string</td>
                                                    <td>no</td>
                                                    <td>This is an optional image. The size of the image is 40 x 40.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>position</td>
                                                    <td>string</td>
                                                    <td>yes</td>
                                                    <td>This is the position of the growl. You can choose from 4 different positions, right-top, right-bottom, left-top, left-bottom.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>delay</td>
                                                    <td>number(integer)</td>
                                                    <td>no</td>
                                                    <td>Show a growl with a delay.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>time</td>
                                                    <td>number(integer)</td>
                                                    <td>yes**</td>
                                                    <td>This is the time that a growl is visible.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>speed</td>
                                                    <td>number(integer)</td>
                                                    <td>yes</td>
                                                    <td>This is the speed of the of the effect.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>effect</td>
                                                    <td>string</td>
                                                    <td>yes</td>
                                                    <td>The type of effect.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>sticky</td>
                                                    <td>boolean</td>
                                                    <td>no</td>
                                                    <td>You can set a growl to sticky mode, this means the growl wont be removed after xxx seconds.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>closable</td>
                                                    <td>boolean</td>
                                                    <td>yes</td>
                                                    <td>Allow users to remove the growl.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>maxOpen</td>
                                                    <td>number(integer)</td>
                                                    <td>no</td>
                                                    <td>You can set per growl the number of open growls per placeholder(position).</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>className</td>
                                                    <td>string</td>
                                                    <td>no</td>
                                                    <td>You can style the growl by using a custom classname.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>onShow</td>
                                                    <td>function</td>
                                                    <td>no</td>
                                                    <td>Run a function on show of a growl.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>onHide</td>
                                                    <td>function</td>
                                                    <td>no</td>
                                                    <td>Run a function on hide of a growl(auto hide or manual removing).</td>
                                                    <td>1.0</td>
                                                </tr>                                                                                            
                                           </tbody> 
                                           <tfoot>
                                               <tr>
                                                    <td colspan="5">* a growl always needs a title <b>or</b> text, the rest can be removed. ** the time isn't required if you set the option 'sticky' to true.
                                                    </td>
                                                </tr>                                            
                                           </tfoot>                                                                                                                                              
										</table>

                                        <div class="section-header">
                                            <h3>eLoader</h3>
                                            <p>Basic pre-loader indicator.</p>
                                        </div>
    
                                        <div class="spacer-15"><!-- spacer 15px --></div>  
                                                                                                                  
                                        <div class="section-header">
                                            <h3>Usage plugin</h3>
                                            <p>How to use our custom made jQuery plugins.</p>
                                        </div>
                                                                                                              
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="jsCode">$.e_notify.loader({
     image: 'images/loaders/type2/light/32.gif',
     position: 'center',
     imageSize: '32 | 32',
     delay: 0,
     time: 1200,
     speed: 100,
     opacity: 0.5,
     onShow: function(){},
     onHide: function(){}
});</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Plugin options</h3>
                                            <p>Most of our custom made jQuery plugins have options/settings.</p>
                                        </div>  
                                                                                               
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Plugin options</th>
                                                    <th scope="col">Type</th>
                                                    <th scope="col">Required</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>image</td>
                                                    <td>string</td>
                                                    <td>no</td>
                                                    <td>You can choose your own loader image.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>position</td>
                                                    <td>string</td>
                                                    <td>yes</td>
                                                    <td>This is the position of the growl. You can choose from 5 different positions, right-top, right-bottom, left-top, left-bottom, center.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                	<td>imageSize</td>
                                                    <td>string</td>
                                                    <td>yes</td>
                                                    <td>This is the dimension of the image 'height | width'.</td>
                                                    <td>1.0</td>
                                                </tr>                                                 
                                                <tr>
                                                    <td>delay</td>
                                                    <td>number(integer)</td>
                                                    <td>no</td>
                                                    <td>Show the loader with a delay.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>time</td>
                                                    <td>number(integer)</td>
                                                    <td>yes</td>
                                                    <td>This is the time that the loader is visible.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>speed</td>
                                                    <td>number(integer)</td>
                                                    <td>yes</td>
                                                    <td>This is the speed of the of the effect.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>opacity</td>
                                                    <td>number(float)</td>
                                                    <td>yes</td>
                                                    <td>This is the opacity of the overlay background.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>onShow</td>
                                                    <td>function</td>
                                                    <td>no</td>
                                                    <td>Run a function on show of the loader.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>onHide</td>
                                                    <td>function</td>
                                                    <td>no</td>
                                                    <td>Run a function on hide of the loader.</td>
                                                    <td>1.0</td>
                                                </tr>                                                                                            
                                           </tbody>                                                                                                                                             
										</table>

                                        <div class="section-header">
                                            <h3>eNotification</h3>
                                            <p>Basic notification messages.</p>
                                        </div>
    
                                        <div class="spacer-15"><!-- spacer 15px --></div>  
                                                                                                                  
                                        <div class="section-header">
                                            <h3>Usage plugin</h3>
                                            <p>How to use our custom made jQuery plugins.</p>
                                        </div>
                                                                                                              
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="jsCode">$.e_notify.notification({
     text: 'This notification message, has the custom class called "notification-warning".',
     position: 'top',
     target: '',
     delay: 0,
     time: 2500,
     speed: 500,
     effect: 'slide',
     sticky: true,
     closable: true,
     className:'notification-warning',
     onShow: function(){},
     onHide: function(){}
});</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Plugin options</h3>
                                            <p>Most of our custom made jQuery plugins have options/settings.</p>
                                        </div>  
                                                                                               
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Plugin options</th>
                                                    <th scope="col">Type</th>
                                                    <th scope="col">Required</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>text</td>
                                                    <td>string</td>
                                                    <td>yes</td>
                                                    <td>The text of the notification.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>position</td>
                                                    <td>string</td>
                                                    <td>yes*</td>
                                                    <td>This is the position of the notification. You can choose from 2 different positions, top, bottom.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>target</td>
                                                    <td>string</td>
                                                    <td>no</td>
                                                    <td>Instead of using a position you can use a target, this alows you to add a notification anywhere you want.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>delay</td>
                                                    <td>number(integer)</td>
                                                    <td>no</td>
                                                    <td>Show the notification with a delay.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>time</td>
                                                    <td>number(integer)</td>
                                                    <td>yes</td>
                                                    <td>This is the time that a notification is visible.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>speed</td>
                                                    <td>number(integer)</td>
                                                    <td>yes</td>
                                                    <td>This is the speed of the of the effect.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>effect</td>
                                                    <td>string</td>
                                                    <td>yes</td>
                                                    <td>This is the effect of the notification.</td>
                                                    <td>1.0</td>
                                                </tr>
                                               <tr>
                                                    <td>sticky</td>
                                                    <td>boolean</td>
                                                    <td>no</td>
                                                    <td>You can set the notification to sticky mode, this means the notification wont be removed after xxx seconds.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>closable</td>
                                                    <td>boolean</td>
                                                    <td>yes</td>
                                                    <td>Allow users to remove the notification.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>className</td>
                                                    <td>string</td>
                                                    <td>no</td>
                                                    <td>You can style the notification by using a custom classname. We have already made the custom classes: notification-success, notification-warning, notification-info, notification-error, notification-msg, notification-success-widget, notification-warning-widget, notification-info-widget, notification-error-widget, notification-msg-widget. Notifications do have a default class.
</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>onShow</td>
                                                    <td>function</td>
                                                    <td>no</td>
                                                    <td>Run a function on show of the notification.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>onHide</td>
                                                    <td>function</td>
                                                    <td>no</td>
                                                    <td>Run a function on hide of the notification.</td>
                                                    <td>1.0</td>
                                                </tr>                                                                                                                                             
                                           </tbody> 
                                           <tfoot>
                                                <tr>
                                                	<td colspan="5">
                                                    * you dont have to use the position option if you use a target.
                                                    </td>
                                                </tr>                                           
                                           </tfoot>                                                                                                                                              
										</table>  

                                        <div class="section-header">
                                            <h3>eClear</h3>
                                            <p>Remove all open, growls or notifications.</p>
                                        </div>
    
                                        <div class="spacer-15"><!-- spacer 15px --></div>  
                                                                                                                  
                                        <div class="section-header">
                                            <h3>Usage plugin</h3>
                                            <p>How to use our custom made jQuery plugins.</p>
                                        </div>
                                                                                                              
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="jsCode">$.e_notify.clear({
	type: 'notification',
	beforeClear: function(){},
	afterClear: function(){}
});</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Plugin options</h3>
                                            <p>Most of our custom made jQuery plugins have options/settings.</p>
                                        </div>  
                                                                                               
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Plugin options</th>
                                                    <th scope="col">Type</th>
                                                    <th scope="col">Required</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>type</td>
                                                    <td>string</td>
                                                    <td>no</td>
                                                    <td>Choose what to delete, you can choose beteen, notification and growl.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>beforeClear</td>
                                                    <td>function</td>
                                                    <td>no</td>
                                                    <td>Run a function before removing.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>afterClear</td>
                                                    <td>function</td>
                                                    <td>no</td>
                                                    <td>Run a function after everything is removed.</td>
                                                    <td>1.0</td>
                                                </tr>                                                                                            
                                           </tbody>                                                                                                                                              
										</table>                                                                              
                                    </div><!-- End tab --> 
                                    
                                    <div id="etab2" class="etabs-content"> 
                                        <div class="doc-intro">
                                            <h3>Dialogs</h3>
                                            <p>Small and big notification messages. These dialogs arn't powerd by any jQuery plugin.</p>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Basic</h3>
                                            <p>Small standard notification messages.</p>
                                        </div>    
                                                                       
                                        <div class="spacer-15"><!-- spacer 15px --></div>
                                        
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                        
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;div class="dialog warning"&gt;
    &lt;img src="images/icons/dialogs/warning-16.png" alt=""/&gt;                                        
    &lt;p&gt;This is an warning message&lt;/p&gt;
    &lt;span&gt;x&lt;/span&gt;
&lt;/div&gt;</pre>
                                        </div>

                                        <div class="section-header">
                                            <h3>Inline</h3>
                                            <p>Small standard inline notification messages. Basic colors.</p>
                                        </div>    
                                                                       
                                        <div class="spacer-15"><!-- spacer 15px --></div>
                                        
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                        
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;div class="dialog-inline warning"&gt;
    &lt;img src="images/icons/dialogs/warning-16.png" alt=""/&gt;                                        
    &lt;p&gt;This is an warning message&lt;/p&gt;
    &lt;span&gt;x&lt;/span&gt;
&lt;/div&gt;</pre>
                                        </div>

                                        <div class="section-header">
                                            <h3>Big size</h3>
                                            <p>Big notification messages.</p>
                                        </div>    
                                                                       
                                        <div class="spacer-15"><!-- spacer 15px --></div>
                                        
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                        
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;div class="dialog-big warning"&gt;
    &lt;h3&gt;This is an warning message&lt;/h3&gt;
    &lt;span&gt;x&lt;/span&gt;
    &lt;div&gt;
    put the extra text here
    &lt;/div&gt;
&lt;/div&gt;</pre>
                                        </div>

                                        <div class="section-header">
                                            <h3>Big size inline</h3>
                                            <p>Big inline notification messages.</p>
                                        </div>    
                                                                       
                                        <div class="spacer-15"><!-- spacer 15px --></div>
                                        
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                        
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;div class="dialog-big-inline warning"&gt;
    &lt;h3&gt;This is an warning message&lt;/h3&gt;
    &lt;span&gt;x&lt;/span&gt;
    &lt;div&gt;
    put the extra text here
    &lt;/div&gt;
&lt;/div&gt;</pre>
                                        </div>

                                        <div class="section-header">
                                            <h3>Custom colors and icons</h3>
                                            <p>Small standard notification messages with custom colors and icons.</p>
                                        </div>
                                        
                                        <div class="spacer-15"><!-- spacer 15px --></div>
                                        
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                                                                                
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;div class="dialog custom-red"&gt;
    &lt;img src="images/icons/plix-16/black/grid-16.png" alt=""/&gt;
    &lt;p&gt;This is an custom message...&lt;/p&gt;
    &lt;span&gt;x&lt;/span&gt;
&lt;/div&gt;</pre>
                                        </div>     
    
                                        <div class="section-header">
                                            <h3>Usage classes</h3>
                                            <p>Defined classes related to a piece of code or plugin.</p>
                                        </div>
                                                                                                                                            
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Available class</th>
                                                    <th scope="col">Element</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>dialog</td>
                                                    <td>div</td>
                                                    <td>Main dialog class</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>dialog-inline</td>
                                                    <td>div</td>
                                                    <td>Main inline dialog class</td>
                                                    <td>1.0</td>
                                                </tr>  
                                                <tr>
                                                    <td>dialog-big</td>
                                                    <td>div</td>
                                                    <td>Main big dialog class</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>dialog-big-inline</td>
                                                    <td>div</td>
                                                    <td>Main big inline dialog class</td>
                                                    <td>1.0</td>
                                                </tr>                                                                                                                                             
                                                <tr>
                                                    <td>warning</td>
                                                    <td>div</td>
                                                    <td>Type of dialogs, these are used for the basic colors</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>info</td>
                                                    <td>div</td>
                                                    <td>Type of dialogs, these are used for the basic colors</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>message</td>
                                                    <td>div</td>
                                                    <td>Type of dialogs, these are used for the basic colors</td>
                                                    <td>1.0</td>
                                                </tr>  
                                                <tr>
                                                    <td>error</td>
                                                    <td>div</td>
                                                    <td>Type of dialogs, these are used for the basic colors</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>success</td>
                                                    <td>div</td>
                                                    <td>Type of dialogs, these are used for the basic colors</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>custom-red</td>
                                                    <td>div</td>
                                                    <td>Custom color: red</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>custom-green</td>
                                                    <td>div</td>
                                                    <td>Custom color: green</td>
                                                    <td>1.0</td>
                                                </tr>  
                                                <tr>
                                                    <td>custom-orange</td>
                                                    <td>div</td>
                                                    <td>Custom color: orange</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>custom-blue</td>
                                                    <td>div</td>
                                                    <td>Custom color: blue</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>custom-purple</td>
                                                    <td>div</td>
                                                    <td>Custom color: purple</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>custom-black</td>
                                                    <td>div</td>
                                                    <td>Custom color: black</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>custom-grey</td>
                                                    <td>div</td>
                                                    <td>Custom color: grey</td>
                                                    <td>1.0</td>
                                                </tr>
                                            </tbody>
                                        </table>                                    
                                    </div><!-- End tab --> 
                                    
                                    <div id="etab3" class="etabs-content"> 
                                        <div class="doc-intro">
                                            <h3>Third-party plugins</h3>
                                            <p>Third-party plugins are not documented here because they have there own documentation.</p>
                                        </div> 
                                                                            
                                        <div class="section-header">
                                            <h3>UI Dialogs</h3>
                                            <p>jQuery UI dialogs.</p>
                                        </div> 

                                        <div class="tp-wrapper">
                                        This is a third party plugin, for information about how to use this plugin and examples please visit 
                                        <a href="http://jqueryui.com/demos/dialogs/">this site</a>.
                                        </div>
                                    </div><!-- End tab --> 
                            	</div>        
                            </section>                           
                            
                            <div class="clear"><!-- New row --></div> 

                            <!-- End grid -->
                                                   
                       </div><!-- End #content-main-inner --> 
                    </div><!-- End #content-main --> 
                </div><!-- End #content-inner --> 
                
                <!-- CONTENT FOOTER -->
                
                <footer id="content-footer">
                    <div class="left">
						<div class="left">
                               <a href="javascript:void(0);" class="button-icon tip-s" title="Some action">
                                  <span class="folder-10 plix-10"></span>
                              </a>                                                        
                              <a href="javascript:void(0);" class="button-icon tip-s" title="Some action">
                                  <span class="pencil-10 plix-10"></span>
                              </a>
                          </div><!-- End .left -->
                          <div class="right">
                              <a href="javascript:void(0);" class="button-icon tip-s" title="Some action">
                                  <span class="refresh-10 plix-10"></span>
                              </a> 
                          </div> <!-- End .right --> 
                    </div><!-- End .left --> 
                    <div class="right">
                    	<div class="left">
                    	Copyright © 2012 <a href="http://bit.ly/ldjfWQ">CreativeMilk</a>
                        </div><!-- End .left -->
                        <div class="right">
                        	<div class="theme-version">Version 1.0</div>
                        </div><!-- End .right -->
                    </div><!-- End .right -->                
                </footer><!-- End #content-footer -->                 
            </div><!-- End #content-border --> 
        </div><!-- End #content --> 
            
    </div><!-- End #container -->
    
    <!-- scroll to top link -->
    <div id="scrolltotop"><span></span></div> 
    
</body>
</html>